<template>
    <div id="add_news">
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-form-item label="新闻名称">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-col :span="12">
                    <el-form-item label="作者">
                        <el-input v-model="form.author"></el-input>
                    </el-form-item>
                    <el-form-item label="点击量">
                        <el-input v-model="form.click"></el-input>
                    </el-form-item>
                    <el-form-item label="是否展示">
                        <el-switch v-model="form.is_show"></el-switch>
                    </el-form-item>
                    <el-form-item label="是否置顶">
                        <el-switch v-model="form.is_top"></el-switch>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="文章首图">
                        <div class="avatar-uploader">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="upload_image"></i>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="新闻摘要">
                        <el-input type="textarea" v-model="form.description"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="新闻内容">
                        <el-input type="textarea" v-model="form.content"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'AddNews',
        data() {
            return {
                form: {
                    title: '',
                    author: '',
                    is_show: true,
                    click: 0,
                    is_top: false,
                    description: '',
                    content: '',
                },
                imageUrl:'',
            }
        },
        methods: {
            // 提交表单
            onSubmit() {
                this.$message('submit');
                console.log('submit!');
            },
            // 选择首图
            upload_image(){
                this.$image({
                    text:'确定删除么？',
                    title:'提示',
                    btnText1:'确定',
                    btnText2:'取消',
                    makeSure:(r)=>{
                        console.log('删除2',r)
                    }
                });
                // this.$image(function(r){
                //     console.log('r',r);
                // })
                console.log('img:',this);
            }

        }
    };
</script>

<style lang="scss">
    #add_news {
        .avatar-uploader {
            
            width: 226px;
            height: 226px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 226px;
            height: 226px;
            line-height: 226px;
            text-align: center;
        }
        .avatar {
            width: 226px;
            height: 226px;
            display: block;
        }
    }
</style>